<template>
	<div class="newPage-index">
		<header class="head"><i class='icon'></i><span>马上花</span></header>
		<div class="msbgIcon">
			<img src="../../assets/msg-imgs/m_straight_away_banner.png" class="autoImg block"/>
		</div>
		<ul class="sortItem flex">
			<li>
				<span>轻松申请</span>
			</li>
			<li>
				<span>极速审批</span>
			</li>
			<li>
				<span>秒级到账</span>
			</li>
		</ul>
		<div class="agree-text">
			<button class="free-btn" @click="onShow">免费开启</button>
			<div class="accept">
				<input type="checkbox" />
				<p><span>已阅读并接受</span><span>《马上花用户服务协议》《个人征信及信息授权书》</span></p>
			</div>
		</div>
		<Alert v-model="show" :title="''" :button-text="'同意并授权'" class="msg-alert"><slot><img src="../../assets/msg-imgs/mashanghua.png" class="block"/><span>您正在申请马上花服务，您同意并授权将个人信息提供给马上花服务方，该信息仅用于您的信用消费服务申请。</span></slot></Alert>
	</div>
</template>

<script>
	import { Alert } from 'vux'

	export default {
		components: {
	      Alert
	    },
	    created(){
	      document.title = '马上花';
	    },
	    data () {
	      return {
	        show: false
	      }
	    },
	    methods: {
	    	onHide () {
		      console.log('on hide')
		    },
		    onShow () {
		      this.$set(this.$data, 'show', true)
		    }
	    }
	}
</script>
<style lang="less" rel="stylesheet/less">
	@import '../styles/main.less';
	body {
		background: #F2F2F2;
	}
	.autoImg {
		width: 100%;
	}
	.newPage-index {
		position:relative;
		.head {
			width: 100%;
			font-size:.36rem;
			color:#fff;
			position: absolute;
			top:0;
			left:0;
			padding: .3rem 0;
			text-align: center;
			.icon {
				display: inline-block;
				height: 100%;
				width: .2rem;
				position: absolute;
				left: .2rem;
				top: 0;
				background: url('../../assets/msg-imgs/nav_back_w.png') left center no-repeat;
				background-size: .2rem auto;
			}
		}
		.sortItem {
			padding: .3rem 0;
			background: #fff;
			li {
				flex: 1;
				height: .5rem;
				padding-top: .8rem;
				text-align: center;
				span {
					font-size: .28rem;
					color: #464646;
				}
				background-repeat: no-repeat;
				background-position: center top;
				background-size: auto .68rem;
				&:first-child {
					background-image: url('../../assets/msg-imgs/ic_install_tuzi.png');
				}
				&:nth-of-type(2) {
					background-image: url('../../assets/msg-imgs/ic_install_time.png');
				}
				&:last-child {
					background-image: url('../../assets/msg-imgs/ic_install_daozhang.png');
				}
			}
		}
		.agree-text {
			margin-top: .5rem;
			button.free-btn {
				display:block;
				width: 90%;
				margin: 0 auto;
				height:.88rem;
				background: #FBC200;
				color:#464646;
				padding: 0;
				border: 0;
				font-size: .32rem;
				border-radius: .08rem;
			}
			.accept {
				display: table;
				width: 90%;
				margin: .3rem auto 0;
				span {
					font-size: .26rem;
				}
				input, p {
					display: table-cell;
					vertical-align: middle;
				}
				input {
					margin: 0;
					width: .32rem;
					height: .32rem;
					vertical-align: middle;
				}
				p {
					padding-left: .1rem;
					display: inline-block;
					vertical-align: middle;
					span {
						color: #FBC200;
					}
				}
			}
		}
		.msg-alert {
			img {
				margin: 0 auto;
			}
			span {
				text-align: left;
				display: block;
				font-size: .28rem;
				margin: .3rem 0;
				line-height: .45rem;
				color: #909090;
			}
			.weui-dialog__ft {
				background: #FBC200;
				a {
					color:#464646;
				}
			}
		}
	}
	
</style>